<template>
  <div id="collegeEmployTrend"></div>
</template>

<script>
  export default {
    name: 'college-employ-compare',
    props: ['collegeCode'],
    data () {
      return {
        url: {
          query: 'datacenter/employment/rate/analysis/y/college'
        },
        queryForm: {
          dialogFormVisible: false,
          data: {
            collegeCode: ''
          }
        }
      }
    },
    mounted () {
      this.drawLine()
    },
    watch: {
      collegeCode: function (val, oldVal) {
        this.queryForm.data.collegeCode = val
        this.drawLine()
      }
    },
    methods: {
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(
          document.getElementById('collegeEmployTrend')
        )
        myChart.showLoading()

        // 加载学校就业趋势
        this.$http.get(this.$http.adornUrl(this.url.query), {params: this.queryForm.data}).then(
          (res) => {
            if (res.data.success) {
              let xAxisArray = []
              let rateArray = []

              let echartsData = res.data.data
              echartsData.forEach(element => {
                xAxisArray.push(element.year)
                rateArray.push(element.rate)
              })

              // 绘制图表
              myChart.setOption({
                title: {text: ''},
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                grid: {
                  left: '5%',
                  right: '5%',
                  bottom: '25%'
                },
                dataZoom: [
                  {
                    type: 'inside'
                  }
                ],
                legend: {
                  data: ['就业率']
                },
                xAxis: {
                  type: 'category',
                  data: xAxisArray,
                  axisTick: {
                    alignWithLabel: true
                  }
                },
                yAxis: {},
                series: [
                  {
                    name: '就业率',
                    type: 'line',
                    data: rateArray
                  }
                ]
              })

              myChart.hideLoading()
            } else {
              this.$message({
                type: 'error',
                message: res.data.info
              })
            }
          },
          (res) => {
            this.$message({
              showClose: true,
              message: '网络错误' + res.status,
              type: 'error'
            })
          }
        )
      }
    }
  }
</script>


